<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>职员列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card shadow="always">
            <!-- 搜索部分 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline">

                <el-form-item>
                    <el-button type="success" size="medium" icon="el-icon-circle-plus-outline" @click="showDialog">添加</el-button>
                </el-form-item>

            </el-form>

            <!-- 表格 -->
            <template>
                <el-table
                        ref="multipleTable"
                        :data="pageBean"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">

                    <!-- prop 属性名 -->

                    <!-- scope.row 表示一行数据 -->
                    <el-table-column
                            prop="roleName"
                            label="角色"
                            width="100">
                    </el-table-column>

                    <el-table-column
                            prop="functionalDescription"
                            label="职能描述"
                            width="80">
                    </el-table-column>


                    <el-table-column
                            prop="addTime"
                            label="创建时间"
                            width="100">
                    </el-table-column>


                    <el-table-column
                            prop="id"
                            label="部门id"
                            width="100">
                    </el-table-column>


                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-button-group>
                                <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
                                <el-button type="primary" icon="el-icon-edit" @click="watch()">查看</el-button>
                                <el-button type="danger" icon="el-icon-delete-solid" @click="deleteById(scope.row)">删除
                                </el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>

                </el-table>
            </template>

        </el-card>

        <!-- 添加 -->
        <el-dialog title="添加/修改员工" :visible.sync="dialogFormVisible" width="550px" :before-close="cancelForm">
            <!-- 表单 -->
            <el-form :model="account" label-width="90px" ref="form">

                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="account.roleName" placeholder="请输入角色名称" style="width: 250px"></el-input>
                </el-form-item>

                <el-form-item label="职位描述" prop="functionalDescription">
                    <el-input v-model="account.functionalDescription" placeholder="请输入职能描述" style="width: 250px"></el-input>
                </el-form-item>


                <el-form-item label="添加时间">
                    <el-date-picker style="width: 200px;"
                                    v-model="account.addTime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    placeholder="选择添加时间">
                    </el-date-picker>
                </el-form-item>


            </el-form>

            <!-- 下面的两个按钮 -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelForm('form')">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 隐藏查看框 -->
        <!-- 表格 -->
        <el-dialog :visible.sync="dialogFormVisibleAndAccount" width="300px" :before-close="close">
            <template>
                <el-table
                        ref="multipleTable"
                        :data="list"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">

                    <!-- prop 属性名 -->

                    <!-- scope.row 表示一行数据 -->
                    <el-table-column
                            prop="accountName"
                            label="账号"
                            width="100">
                    </el-table-column>

                    <el-table-column
                            prop="name"
                            label="名字"
                            width="80">
                    </el-table-column>

                    <el-table-column
                            prop="telphone"
                            label="电话"
                            width="80">
                    </el-table-column>


                </el-table>
            </template>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                pageBean: [],
                list: [],
                formInline: {},
                dialogFormVisible: false,
                accountList: [],
                formMode: 'add',
                account: {},
                dialogFormVisibleAndAccount: false,
                id: null,
            };
        },
        methods: {
            close() {
                this.dialogFormVisibleAndAccount = false;
            },
            watch() {
                this.$axios.get(`/manager/findByAccountId`).then(resp => {

                    this.list = resp.data.data;
                    this.id = resp.data.data.accountId;
                    this.dialogFormVisibleAndAccount = true;
                })
            },
            cancelForm() {
                //清空表单
                this.$refs.form.resetFields();
                this.dialogFormVisible = false;
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.formInline.pageSize = val;
                this.reloadData();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.formInline.pageNum = val;
                this.reloadData();
            },


            reloadData() {
                this.$axios.get(`/account/find`).then(resp => {
                    this.pageBean = resp.data.data;
                    console.log("pageBean",this.pageBean)
                })
            },
            search() {
                this.formInline.page = 1;
                this.reloadData();
            },
            edit(row) {
                //设置为编辑操作
                this.formMode = 'update';
                console.log(row);
                //显示对话框
                this.dialogFormVisible = true;
                //将对象复制一份
                let obj = {};
                Object.assign(obj,row); //复制该行的值
                this.account = obj;
                console.log("this.account",this.account);
            },
            deleteById(row) {
                this.$confirm(`此操作将永久删除信息：${row.roleName}, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.get(`/account/deleteById?id=${row.id}`).then(resp => {
                        if (resp.data.data) {
                            this.$message.success(`删除记录记录成功`);
                        } else {
                            this.$message.error(`删除记录失败`);
                        }
                        this.reloadData();
                    });
                }).catch(() => {

                });
            },
            //重置
            reopen() {
                this.reloadData();
            },
            showDialog() {

                this.formMode = 'add';
                this.dialogFormVisible = true;
                this.$nextTick(() => {
                    this.$refs.form.clearValidate();
                    this.accountList = [];
                    this.account = {};
                });
            },
            addAccount() {
                this.$axios.post("/account/add", this.account).then(resp => {
                    console.log("this.account",this.account)
                    if (resp.data.code == 200) {
                        this.$message.success("添加成功");
                        //清空所有
                        this.$refs.form.resetFields();
                        this.account = {};
                        this.showDialog();
                        this.reloadData();
                    }
                });
            },
            //提交添加操作
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.formMode === 'add') {
                            this.addAccount();
                        } else if (this.formMode === 'update') {
                            this.updateAccount();
                        }
                    } else {
                        console.log("表单验证失败");
                        return false;
                    }
                });
                this.showDialog();
            },
            updateAccount() {
                this.$axios.post("/account/update", this.account).then(resp => {
                    console.log(resp);
                    if (resp.data.code == 200) {
                        if (resp.data.data === 1) {
                            this.$message.success(`成功修改信息`);
                        } else {
                            this.$message.error("修改失败");
                        }
                        //关闭对话框
                        this.cancelForm();
                        //重新加载数据
                        this.reloadData();
                    }

                });
            },
            findAllAccount() {
                this.$axios.get("/account/findAll").then(resp => {
                    this.accountList = resp.data.data;
                })
            }
        },
        created() {
            this.reloadData();
            this.findAllAccount();
        }
    };
</script>
<style lang="less" scoped>
</style>